/**
 * loader  1、下载；2、使用（配置loader）
 * plugins 1、下载；2、引入；3、使用。
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // 处理样式资源
      {
        test: /\.css$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader'],
      },
      // 除了html/js/css资源，都叫其它资源
      // 这里的正则表达式是“分组”，就是使用 ()
      // 所以()被称为捕获分组，用来捕获数据，
      // 当我们想要从匹配好的数据中提取关键数据的时候可以使用分组。
      {
        exclude: /\.(css|less|js|html)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
        },
      },
    ],
  },
  plugins: [
    // html-webpack-plugin
    // 默认创建一个空的html文件，引入打包输出的所有资源（js/css）
    // 需求：需要有结构额html文件
    new HtmlWebpackPlugin({
      // 复制这个html文件，并且引入打包输出的所有资源（js/css）
      // 也就是上面的loader不要再引入css-loader等等配置了。
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  // mode: 'production',
}
